<template>
	<view class="collpanel">
		<view class="collapse-panel2" >
			<view class="header" :style="site=='left'?'justify-content: space-between;':'justify-content: flex-start;'">
				<image style="width: 40rpx;height: 40rpx;" :src="photo_cdn+'zpupload/static/zupu/canto.png'"></image>
				<text v-if="site=='left'">{{ title }}</text>
				<image style="width: 32rpx;" mode="widthFix" v-if="isOpen" :src="photo_cdn+'zpupload/static/zupu/bu.png'"></image>
				<image style="width: 32rpx;" mode="widthFix" v-else :src="photo_cdn+'zpupload/static/zupu/rg.png'"></image>
				<text v-if="site!='left'">{{ title }}</text>	
			</view>
			<view class="header2" @click="toggle" :style="site=='left'?'justify-content: space-between;':'justify-content: flex-start;'">
				<view class="flex ali-c">
					<image style="width: 40rpx;height: 40rpx;margin-right: 20rpx;" :src="photo_cdn+'zpupload/static/zupu/canto.png'"></image>
					<text v-if="site=='left'">{{ title }}</text>
				</view>
				
				<image style="width: 32rpx;" mode="widthFix" v-if="isOpen" :src="photo_cdn+'zpupload/static/zupu/bu.png'"></image>
				<image style="width: 32rpx;" mode="widthFix" v-else :src="photo_cdn+'zpupload/static/zupu/rg.png'"></image>
				<text v-if="site!='left'">{{ title }}</text>	
			</view>
			<!-- <transition name="slide-up"> -->
				<view v-show="isOpen" class="content"  >
					<!-- :open="isOpen" -->
					<slot ></slot>
				</view>
			<!-- </transition> -->
		</view>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn} = config.baseUrl;
	export default {
		name: 'collpanel',
		props: {
			title: String,
			open: Boolean,
			site: { //文字位置
				type: String,
				default: 'left',
			},
		},
		data() {
			return {
				photo_cdn,
				isOpen: false
			};
		},
		methods: {
			toggle() {
				if (this.isOpen) {
					// this.closeAllDescendants(this.$slots.default);
				}
				this.isOpen = !this.isOpen;
				// this.$emit('toggle',this.isOpen)
			},
			// closeAllDescendants(slots) {
			// 	console.log(slots)
			// 	if (slots) {
			// 		slots.forEach(slot => {
			// 			if (slot.componentInstance && slot.componentInstance.$options.name === 'CollapsePanel') {
			// 				slot.componentInstance.isOpen = false;
			// 				this.closeAllDescendants(slot.componentInstance.$slots.default);
			// 			}
			// 		});
			// 	}
			// }
		}
	};
</script>
<style scoped>
	.collapse-panel {
		overflow: hidden;
	    line-height: 50rpx;
	}
	.content {
		overflow: hidden;
	}
	.slide-up-enter-active,
	.slide-up-leave-active {
		transition: all .5s ease;
	}

	.slide-up-enter,
	.slide-up-leave-to {
		transform: translateY(-100%);
	}

	.collapse-panel2 {
		position: relative;
		margin-bottom: 20rpx;
	}

	.header {
		cursor: pointer;
		padding: 25rpx 15rpx;
		display: flex;
		align-items: center;
		font-size: 38rpx;
		/* border-bottom: 2rpx solid #eaeaea; */
	}

	.header2 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		cursor: pointer;
		padding: 25rpx 20rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 16rpx;
		z-index: 1;
		font-size: 38rpx;
		/* border-bottom: 2rpx solid #eaeaea; */
	}
	.header2:active{
		background-color: #f5f5f5;
	}

	.arrow {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 12rpx 8rpx 0 8rpx;
		border-color: #999 transparent transparent transparent;
		transition: transform 0.3s ease;
	}

</style>